<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">  
    <title>My JSP 'testEar.jsp' starting page</title>  
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/testEar/css/style.css">
  </head>

  
  <body>
  	
    <div class="music_wrap">
		<div class="artist_info">
			<div class="artist_avatar">
				<img />
			</div>
			<div class="artist">Artist</div>
			<div class="artist_name">歌手</div>
		</div>
 
		<div class="track">
			<div class="music_name">歌曲</div>
			<div class="music_album">专辑</div>
		</div>
 
		<div class="control">
			<div class="option">
				<div class="time">-00:00</div>
				<div class="volume" title="音量">
					<p>&#xe604;</p>
				</div>
				<div class="volume_wrap hidden">
					<div class="volume_bar">
						<div class="volume_now"></div>
					</div>
				</div>
				<ul id="option_list">
					<li class="repeat" title="单曲循环">&#xe609;</li>
					<li class="shuffle" title="随机播放">&#xe608;</li>
					<li class="list" title="列表循环">&#xe606;</li>
				</ul>
			</div>
 
			<div class="progress_bar" id="bar">
				<div class="progress"></div>
				<div class="buffer"></div>
			</div>
 
			<div class="action_button">
				<div class="prev" title="上一首">&#xe60d;</div>
				<div class="play" title="播放" id="play" >&#xe60a;</div>
				<div class="pause hidden" title="暂停">&#xe60b;</div>
				<div class="next" title="下一首">&#xe60c;</div>
			</div>
		</div>
 
		<audio id="audio">
			<p>您的浏览器不支持HTML5播放器呢！赶紧换一个最新的呗^_^.</p>
		</audio>
	</div>
	<script id="testScript" type="text/javascript" src="${pageContext.request.contextPath}/admin/testEar/js/index.js" data=""></script>
	  <script type="text/javascript">
  	
  	var playList = [
  	  <c:forEach items="${list}" var="m">
		{
			'artist' : "${m.singer}",
			'musicName' : "${m.musicName}",
			'musicAlbum' : '<旅行的意义> 2004',
			'musicURL' : "${pageContext.request.contextPath}/${m.urlmusic}",
			'avatarURL' : 'testEar/avatar/cqz.jpg',
			'musicTime' : '245'
		},
	  </c:forEach>
	];
		
	alert(playList[0].artist);
	
	document.getElementById("testScript").setAttribute("data",playList);
	var a = document.getElementById("testScript").getAttribute("data");
	alert(a[0]);
  </script>
  

	


  </body>
  

</html>
